<script setup>

import {onMounted, reactive, ref} from "vue";
import {useRoute} from "vue-router";
import {doGet, doPostJson} from "../../util/HttpClient.js";
import {ElMessage} from "element-plus";
import router from "../../router/router.js";

const userFormRef = ref()

const userForm = reactive({
  id: '',
  loginName: '',
  phone: '',
  shopName: '',
  shopScope: '',
  userEmail: ''
})

//定义验证规则
const rules = reactive({
  loginName: [
    {required: true, message: '必须输入登录名称', trigger: 'blur'},
    {min: 5, max: 20, message: '登录名称是5-20个字符', trigger: 'blur', informType: 'warning'}
  ],

  phone: [
    {required: true, message: '必须输入联系方式', trigger: 'blur'},
    {min: 11, max: 11, message: '手机号是11位', trigger: 'blur', informType: 'warning'}
  ],

  shopName: [
    {required: true, message: '必须输入平台名称', trigger: 'blur'},
    {min: 4, max: 20, message: '平台名称是4-20个字符', trigger: 'blur', informType: 'warning'}
  ],
  shopScope: [
    {required: true, message: '必须输入经营范围', trigger: 'blur'
    },
    {min: 10, max: 80, message: '经营范围是10-80个字符', trigger: 'blur', informType: 'warning'}
  ],
  userEmail: [
    {required: true, message: '必须输入联系邮箱', trigger: 'blur'},
    {min: 4, max: 50, message: '联系邮箱是4-50个字符', trigger: 'blur', informType: 'warning'}
  ]
})

onMounted(() =>{
  const userId = useRoute().query.id
  if (userId) {
    doGet('/user/id', { userId: userId }).then((resp) => {
      if (resp.data.code == 1000 && resp.data.data != '') {
        let user = resp.data.data
        userForm.id = user.id
        userForm.loginName = user.loginName
        userForm.phone = user.phone
        userForm.shopName = user.shopName
        userForm.shopScope = user.shopScope
        userForm.userEmail = user.userEmail
      }
    })
  }
})

//编辑完成后点击的确定事件
const onEdit = async (frm) => {
  if (!frm){
    return
  }
  await frm.validate((valid) =>{
    if (valid){
      doPostJson('/user/edit',userForm).then((resp) =>{
        if (resp.data.code == 1000){
          ElMessage.success(resp.data.msg)
          router.push({
            path:'/frame/user/list'
          })
        }
      })
    }else {
      ElMessage.warning('请检查商户基本信息')
    }
  })
}

//点击重置事件
const onReset = () => {
  
}

</script>

<template>
  <div style="width: 500px">
    <el-form
        :model="userForm"
        ref="userFormRef"
        :rules="rules"
        label-width="80px"
        :inline="false">
      <el-form-item label="登录名称" prop="loginName">
        <el-input v-model="userForm.loginName"></el-input>
      </el-form-item>
      <el-form-item label="联系方式" prop="phone">
        <el-input v-model="userForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="商户名称" prop="shopName">
        <el-input v-model="userForm.shopName"></el-input>
      </el-form-item>
      <el-form-item label="经营范围" prop="shopScope">
        <el-input v-model="userForm.shopScope"></el-input>
      </el-form-item>
      <el-form-item label="联系邮箱" prop="userEmail">
        <el-input v-model="userForm.userEmail"></el-input>
      </el-form-item>
      <el-form-item style="margin-left: 80px">
        <el-button type="success" round @click="onEdit(userFormRef)">确定</el-button>
        <el-button type="warning" round @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped>

</style>